<template>
  <div class="home">
    <div class="header el-header viewFrameWork-header">
      <Logo />
      <div class="header-middle">
        <div data-v-8ef42844="" class="body-toolbar clearfix">
          <div data-v-8ef42844="" class="toolbar-left fl">
            <span
              data-v-8ef42844=""
              class="system-name"
              style="font-weight: 600"
            >
              在线教学管理平台
            </span>
            <span data-v-8ef42844="" class="version-name">教师端</span>
          </div>
          <div data-v-8ef42844="" class="toolbar-right fr"></div>
        </div>
      </div>
      <!-- 头部右侧 -->
      <div class="header-right">
        <el-menu class="el-menu-header-right" router mode="horizontal">
          <!-- 通知公告 -->
          <el-menu-item class="leftIcon" index="notice_news">
            <!-- 铃铛 -->
            <!-- <i class="el-icon-bell" style="font-size: 24px"></i> -->
            <el-badge :value="num" class="pinglun">
              <i class="el-icon-bell" style="font-size: 24px"></i>
            </el-badge>
          </el-menu-item>
          <!-- 帮助文档 -->
          <el-menu-item class="questIcon">
            <template slot="title">
              <el-popover placement="top-start" width="200" trigger="hover">
                <template>
                  <div>
                    <i
                      style="font-size: 22px; color: #134b7a"
                      class="el-icon-s-claim"
                    ></i>
                    <span style="margin-left: 10px; font-size: 16px"
                      >帮助文档</span
                    >
                  </div>
                  <p style="margin-top: 1em">
                    <a style="color: #0074e9; margin-left: 40px" href=""
                      >去查看</a
                    >
                  </p>
                </template>

                <span
                  slot="reference"
                  class="iconfont icon-bangzhu1 headImg"
                ></span>
              </el-popover>
              <!-- 文档 -->
              <!--<i class="el-icon-question"></i>-->
            </template>
          </el-menu-item>

          <el-submenu index="3">
            <template slot="title">
              <!-- 头像 -->
              <span class="iconfont icon-laoshi headImg"></span>
              <!-- <el-avatar
                src="//at.alicdn.com/t/font_2900274_mz6ibagxx1r.css"
              ></el-avatar> -->
            </template>
            <el-menu-item index="2-1">查看个人信息</el-menu-item>
            <el-menu-item index="2-2">更改用户</el-menu-item>
            <el-menu-item index="/login" @click="handleLoginOut()"
              >退出</el-menu-item
            >
          </el-submenu>
        </el-menu>

        <el-button type="info" @click="handleLoginOut()" v-if="false"
          >退出</el-button
        >
      </div>
    </div>

    <el-container>
      <!-- 左侧菜单 -->
      <el-aside :style="isCollapse ? 'width:63px' : 'width:185px'">
        <el-tooltip
          effect="dark"
          :content="isCollapse ? '展开导航' : '收起导航'"
          placement="right"
        >
          <!-- 收起和展开按钮 -->
          <div
            class="isCollapse"
            :style="isCollapse ? 'width:63px' : 'width:185px'"
            @click="isCollapse = !isCollapse"
          >
            <i
              class="el-icon-d-arrow-right"
              style="color: #fff"
              v-if="isCollapse"
            ></i>
            <i class="el-icon-d-arrow-left" style="color: #fff" v-else></i>
          </div>
        </el-tooltip>
        <el-menu
          class="el-menu-vertical-demo"
          router
          :default-active="$store.state.activeName"
          @select="handleSelect"
          background-color="#111639"
          text-color="#fff"
          active-text-color="#fff"
          :collapse="isCollapse"
        >
          <template v-for="route in routes">
            <el-menu-item
              v-if="!route.children"
              :key="route.path"
              :index="route.path"
            >
              <i :class="route.meta.icon"></i>
              <span>{{ route.meta.title }}</span>
            </el-menu-item>

            <el-submenu v-else :key="route.path" :index="route.path">
              <template slot="title">
                <i :class="route.meta.icon"></i>
                <span>{{ route.meta.title }}</span>
              </template>

              <el-menu-item
                v-for="subroute in route.children"
                :key="subroute.path"
                :index="subroute.path"
              >
                <span>{{ subroute.meta.title }}</span>
              </el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>

      <!-- 中间主体部分 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Logo from '../components/logo.vue'
import { UserInfo, LoginOut } from '@/utils/login'
import getRoutes from '../router/routes'
export default {
  data() {
    return {
      isCollapse: false, // 菜单折叠与收起
      // 通知消息个数
      num: 0,
      activeMenu: '',
      defaultMenu:[]
    }
  },
  created() {
    let activeMenu = window.localStorage.getItem('path')
    this.$store.commit('handleTab', activeMenu)

  },
  computed: {
    routes() {
      const childrens = this.$router.options.routes[1].children
      /* const userroutes=window.localStorage.getItem('userroutes')
      if(userroutes){
        childrens.push(JSON.parse(userroutes))
      } */
      childrens.forEach((item) => {
        if (!item.children) return
        item.children = item.children.filter((childrenitem) => {
          return childrenitem.meta.is_show !== false
        })
      })
      return childrens
    },
  },
  methods: {
    handleLoginOut() {
      this.$router.options.routes[1].children=this.$router.options.routes[1].children.slice(0,1)
      LoginOut()
    },
    handleSelect(index) {
      this.$store.commit('handleTab', index)
    },
  },
  components: {
    Logo,
  },
  mounted() {},
}
</script>

<style>
</style>

<style scoped>
.el-menu-vertical-demo >>> [class*=' el-icon-'],
[class^='el-icon-'] {
  color: #fff !important;
}
.el-aside .el-submenu >>> .el-submenu__title:hover {
  background-color: rgb(0, 150, 136) !important;
}
.el-aside >>> .el-menu {
  border-right: none;
}
.el-aside >>> .el-submenu__icon-arrow {
  right: 8px !important;
}
/* .el-aside .el-menu >>> .el-menu-item{
  background-color: #111639;
} */
/* .el-aside >>> .el-submenu__title{
  color: #fff;
} */
.el-menu-vertical-demo >>> .el-menu-item.is-active {
  background-color: rgb(0, 150, 136) !important;
}
</style>

<style scoped lang="less">
.viewFrameWork-header {
  -webkit-box-shadow: 0 1px 4px 0 rgba(58, 62, 81, 0.2);
  box-shadow: 0 1px 4px 0 rgba(58, 62, 81, 0.2);
  padding: 0;
  position: relative;
  z-index: 999;
}
/deep/ .el-badge__content.is-fixed {
  top: 22px;
  right: 18px;
}

.s_footer {
  position: absolute;
  left: 47%;
  bottom: 0px;
  line-height: 22px;
  padding: 10px 0;
  text-align: center;
  font-size: 12px;
}

// 头部
.header {
  position: relative;
  display: flex;
  padding: 0;
  align-items: center;
  height: 70px;
  z-index: 1;
  background: #fff !important;

  // 头部左侧
  .header-left {
    margin-left: 10px;
    span {
      font-size: 20px;
      line-height: 72px;
    }
  }
  // 头部中间
  .header-middle {
    margin: 0 30px;
  }
  // 头部右侧
  .header-right {
    position: absolute;
    top: 5px;
    right: 40px;
    line-height: 70px;
    // index 2
    .questIcon {
      margin-left: 20px;
      border-bottom: none;
    }
    .leftIcon {
      border-bottom: none;
    }
    // .
    .el-menu-header-right {
      font-size: 18px;
      border: none;
    }
    .el-submenu {
      margin-top: 2px;
    }
  }
}

// 下部分主体
.el-container {
  background: #f5f7fa;
  overflow: auto;
  // 左侧菜单
  .el-aside {
    background: #10163b;

    .el-tooltip {
      border: none;
      // margin-top: 22px;
    }
    // 菜单折叠和收起按钮
    .isCollapse {
      position: relative;

      width: 159px;
      height: 35px;
      line-height: 33px;
      background: #08233d !important;
      font-size: 18px;
      // 左侧菜单展开和收起图标
      i {
        position: absolute;
        right: 21px;
        top: 10px;
      }
    }
  }

  // 中间部分主体
  .el-main {
    min-width: 850px;
    overflow: auto;
  }
}

.el-menu-item {
  min-width: 0;
}
</style>

// 新增
<style scoped lang="less">
.home {
  // 左侧菜单
  .el-aside {
    .el-menu {
      .el-menu-item:hover {
        background: rgb(0, 150, 136) !important;
      }
    }
  }
  // 展开里面
  .el-menu--inline {
    .is-active {
      background-color: rgb(0, 150, 136) !important;
    }
  }
  // 外面
  .el-submenu__title {
    span {
      font-size: 15px;
    }
  }

  .header {
    // 头部右侧
    .header-right {
      .el-menu-header-right {
        i {
          color: #909399 !important;
        }
      }
      .el-menu-item {
        .el-icon-message-solid {
          margin-right: 0 !important;
        }
        padding: 0;
      }
      .headImg {
        font-size: 24px !important;
        padding: 6px;
        background: none;
      }
    }
  }
}
</style>

// 新增二
<style scoped lang="less">
.home {
  height: 100%;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  // 头部左侧
  .header-middle {
    .toolbar-left {
      display: flex;
      align-items: center;
      .system-name {
        font-size: 24px;
        color: #27274a;
      }
      .version-name {
        margin-left: 13px;
        font-size: 14px;
        line-height: 24px;
        height: 24px;
        background: #fa4d27;
        color: #fff;
        border-radius: 4px;
        padding: 0 10px;
      }
    }
  }

  // .aside .el-submenu__title:hover {
  //   background-color: #009688 !important;
  // }
  .aside .el-submenu__title {
    span {
      font-size: 15px !important;
    }
  }
  .el-menu-item {
    font-size: 14px !important;
  }
}
</style>
